<template>
  <div>
    <div class="bg">
      <div class="title">院校库</div>
      <van-search
        v-model="university"
        show-action
        input-align="center"
        placeholder="请输入搜索的大学"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>

      <div class="un">
        <div class="un-round" v-for="(item,index) in undata" :key="index" :id="index">
          <div class="un-round-left">
            <img :src='item.imgSrc' alt="" />
          </div>
          <div class="un-round-right">
            <div class="un-round-right-top">
              <ul>
                <li class="school">{{item.schoolName}}</li>
                <li class="city">{{item.area}}</li>
                <li class="type">{{item.mes}}</li>
                <li class="py">{{item.ask}}类</li>
              </ul>
            </div>
            <div class="un-round-right-bottom">
              <ul>
                <li>最低分：{{item.score}}</li>
                <li class="last">要求：{{item.tips}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <van-divider class="bottom" v-if="se">已经到底啦</van-divider>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      university: "",
      unSrc: require("../assets/school/98.jpg"),
      undata:"",
      se:false
    };
  },
  methods: {
    onSearch() {
      let un = this.university;
      let data = {schoolName:un}
      axios
          .post("http://127.0.0.1/list/searchschool", data, {
            headers: "application/x-www-form-urlencoded",
          })
          .then((res) => {
            let { data } = res;
            if (data.code == 200) {
              let mes = data.data;
              console.log(mes);
              this.undata = mes
              this.se = true
            } else if (data.code == -1) {
              console.log("查询失败");
            }
          });
    },
  },
};
</script>
<style lang="less" scoped>
.bg {
  height: 108px;
  .title {
    text-align: center;
    line-height: 54px;
    height: 54px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    background: linear-gradient(to left, #29eac4, #4284db);
  }
  .un {
    width: 95%;
    margin: 0 auto;
    background-color: white;
    border-radius: 10px;
    .un-round {
      display: flex;
      // justify-content: space-around;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .un-round-left {
        img {
          width: 80px;
          height: 80px;
        }
        margin-right: 4px;
      }
      .un-round-right {
        margin-left: 5px;
        height: 84px;
        box-sizing: border-box;
        .un-round-right-top {
          ul {
            display: flex;
            height: 40px;
            box-sizing: border-box;
            line-height: 40px;
            .school{
              font-weight: bold;
              font-size: 14px;
            }
            .city{
              margin-left: 4px;
            }
            .city,.type,.py{
              height: 26px;
              line-height: 24px;
              font-size: 12px;
              border: 1px solid #eee;
              color: #555;
              display: inline-block;
              padding: 0 8px;
              margin-right: 4px;
              margin-top: 7px;
            }
          }
        }
        .un-round-right-bottom {
          ul {
            display: flex;
            box-sizing: border-box;
            margin-top: 10px;
            line-height: 20px;
            li {
              font-size: 12px;
              border-right: 1px solid grey;
              margin-right: 2px;
              padding-right:2px
            }
            .last {
              border: 0;
            }
          }
        }
      }
    }
  }
  .bottom{
    margin-bottom: 70px;
  }
}
</style>
<style lang="less">
.van-search {
  margin: 0 auto;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>